import { NButton, NForm, NFormItem, NInput } from 'naive-ui'
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

type LoginForm = {
  username: string
  password: string
}

const ResetPage = defineComponent(() => {
  const form = ref<LoginForm>({ username: '21342', password: '' })
  const router = useRouter()

  function handleGoPath(path: string) {
    console.log(`🚀  -> file: reset.tsx  -> line 15  -> handleGoPath  -> path`, path)

    router.push({ path })
  }

  return () => (
    <div class="px-10 py-5 shadow-2xl rounded bg-white">
      <p class="italic text-center mb-3 text-xl font-black">Template for TS</p>
      <NForm class="w-72" show-require-mark={false} model={form.value}>
        <NFormItem
          label="用户名"
          rule={{ required: true, message: '请先输入用户名' }}
          path="form.username"
        >
          <NInput v-model:value={form.value.username} placeholder="输入用户名" type="text"></NInput>
        </NFormItem>
        <NFormItem
          label="密码"
          rule={{ required: true, message: '请先输入密码' }}
          path="form.password"
        >
          <NInput
            v-model:value={form.value.password}
            placeholder="输入密码"
            type="password"
          ></NInput>
        </NFormItem>
        <NButton block type="primary">
          立 即 注 册
        </NButton>
        <p class="flex justify-end mt-2">
          <NButton tag="a" onClick={() => handleGoPath('/login')} text>
            已有账号？点这里
          </NButton>
        </p>
      </NForm>
    </div>
  )
})

export default ResetPage
